﻿
<!DOCTYPE html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet"
          href="../../css/table.css" type="text/css">
    <script src="~/js/jquery-1.11.1.js"></script>
    <script src="~/js/vue.js"></script>
</head>

<body>
    <div id="app">
        <table width="100%">
            <tr>
                <td>
                    <font color="black">您正在做的业务是：人力资源--人力资源档案管理--人力资源档案查询 </font>
                    <input type="text" id="where" hidden value="@ViewData["where"]" />
                </td>
            </tr>
            <tr>
                <td>
                    符合条件的人力资源档案总数：{{rows}}例
                </td>
            </tr>
        </table>
        <table width="100%" border="1" cellpadding=5 cellspacing=1
               bordercolorlight=#848284 bordercolordark=#eeeeee
               class="TABLE_STYLE1">
            <tr class="TR_STYLE1">
                <td width="16%" class="TD_STYLE1">
                    档案编号
                </td>
                <td width="13%" class="TD_STYLE1">
                    姓名
                </td>
                <td width="8%" class="TD_STYLE1">
                    性别
                </td>
                <td width="14%" class="TD_STYLE1">
                    I级机构
                </td>
                <td width="14%" class="TD_STYLE1">
                    II级机构
                </td>
                <td width="14%" class="TD_STYLE1">
                    III级机构
                </td>
                <td width="14%" class="TD_STYLE1">
                    职位分类
                </td>
                <td width="7%" class="TD_STYLE1">
                    职位名称
                </td>
            </tr>
            <tr class="TR_STYLE2" v-for="(item,index) in dt">
                <td width="16%" class="TD_STYLE2">
                    <a :href="'/HumanResources/change_list_information/'+[item.huf_id ]"> {{item.human_id}}</a>
                </td>
                <td width="13%" class="TD_STYLE2">
                    {{item.human_name}}
                </td>
                <td width="8%" class="TD_STYLE2">
                    {{item.human_sex}}
                </td>
                <td width="14%" class="TD_STYLE2">
                    {{item.first_kind_name}}
                </td>
                <td width="14%" class="TD_STYLE2">
                    {{item.second_kind_name}}
                </td>
                <td width="14%" class="TD_STYLE2">
                    {{item.third_kind_name}}
                </td>
                <td width="14%" class="TD_STYLE2">
                    {{item.human_major_kind_name}}
                </td>
                <td width="7%" class="TD_STYLE2">
                    {{item.hunma_major_name}}
                </td>
            </tr>
        </table>
        <div align="center" style="font-size: 18px;color: gray">
            &nbsp;&nbsp;总数：
            <font style="color: maroon;font-weight: bold;">{{rows}}</font>
            例
            &nbsp;&nbsp;&nbsp;
            每页显示 <font style="color: maroon;font-weight: bold;">{{pageSize}}</font>
            条
            &nbsp;&nbsp;&nbsp;
            当前第 <font style="color: maroon;font-weight: bold;">{{currentPage}}</font>
            页
            &nbsp;&nbsp;&nbsp;共
            <font style="color: maroon;font-weight: bold;">{{pages}}</font>
            页
            <a style="color: navy;font-weight: bold" v-on:click="first()">首页</a>
            <a style="color: navy;font-weight: bold"
               v-on:click="prev()">上一页</a>
            <a style="color: navy;font-weight: bold"
               v-on:click="next()">下一页</a>
            <a style="color: navy;font-weight: bold"
               v-on:click="last()">末页</a>
            &nbsp;&nbsp;&nbsp;跳到第
            <input id=page type=text v-model="tpage" class=input1 size=1>
            页&nbsp;&nbsp;
            <input type="image" v-on:click="tiao()" src="~/images/go.bmp" width=18 height=18 border=0>
        </div>
    </div>
</body>
<script type="text/javascript">
    var vm = new Vue({
        el: "#app",
        data: {
            dt: [],
            rows: 0,
            pages: 0,
            currentPage: 1,
            pageSize: 3,
            tpage: 1
        },
        methods: {
            load: function () {
                var t = this;
                var where = $("#where").val();
                $.ajax({
                    url: "/HumanResources/GetAllHuman",
                    type: "Get",
                    data: { "currentPage": +t.currentPage, "where": where },
                    success: function (msg) {
                        var data = eval("(" + msg + ")");
                        t.dt = data["list"];
                        t.rows = data["rows"];
                        t.pages = data["pages"];
                    }
                });
            },
            first: function () {
                this.currentPage = 1;
                this.load();
            },
            prev: function () {
                if (this.currentPage > 1) {
                    this.currentPage = this.currentPage - 1;
                    this.load();
                }
            },
            next: function () {
                if (this.currentPage < this.pages) {
                    this.currentPage = this.currentPage + 1;
                    this.load();
                }

            },
            last: function () {
                this.currentPage = this.pages;
                this.load();
            },
            tiao: function () {
                if (this.tpage > 0 && this.tpage <= this.pages) {
                    this.currentPage = this.tpage;
                    this.load();
                }
            },
        },
        mounted: function () {
            this.load();
        }
    });
</script>




